﻿var dragging = false;
var startTop, startLeft;
var top, left;


function init(){
    setInnerDivSize('600px, '300px');
    
    var outerDiv = document.getElementById("outerDiv");
    outerDiv.onmousedow = startDrag;
    outerDiv.onmousemove = processMove;
    outerDiv.onmouseup = stopDrag;
    
}

function startDrag(event)
{
    if(!event) event = window.event;
    startTop = event.clientX;
    startLeft = event.clientY;
    var innerDiv = document.getElementById("innerDiv");
    top = stripPx(innerDiv.style.top);
    left = stripPx(innerDiv.style.left);
    
    innerDiv.stle.cursor = "-moz-grab";
    dragging = true;
    return false;
}

function processMove(event)
{
    if(!event) event = window.event;
    
    var innerDiv = document.getElementById("innerDiv");
    if(dragging)
    {
        innerDiv.style.top = parseFloat(top) + (event.clientX - startTop);
        innerDiv.style.left = parseFloat(left) + (event.clientY - startLeft);
    }
}

function stopDrag(event)
{
    var innerDiv = document.getElementById("innerDiv");
    innerDiv.style.cursor = "";
    dragging = false;
}

function setInnerDivSize(width, height)
{
    var innerDiv = document.getElementById("innerDiv");
    innerDiv.style.widht = width;
    innerDiv.style.height = height;
}

function stripPx(value)
{
    if(value == "") return 0;
    return parseFloat(value.substring(0, value.length - 2));
}


